<!DOCTYPE html>

<head>
    <meta charset="utf8">
    <!-- 是页面自适应大小 -->
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
    <title>跟随鼠标移动的小球</title>
    <script src="https://unpkg.com/vue@next"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        .container {
            /* 使用绝对位置方便调整 */
            margin: 0;
            padding: 0;
            position: absolute;
            width: 440px;
            height: 440px;
            background-color: black;
            display: inline;
        }

        .ball {
            position: absolute;
            width: 60px;
            height: 60px;
            left: 100px;
            top: 100px;
            background-color: white;
            border-radius: 30px;
            z-index: 100;
        }
    </style>
</head>

<body>
    <div id="myapp">
        <div class="container" @mousemove.stop="move">
            <!-- 绑定存储属性到css样式 -->
            <div class="ball" :style="{left:offsetX+'px',top:offsetY+'px'}"></div>
        </div>
    </div>
    <script>
        const app = {
            data() {
                return {
                    offsetX: 0,
                    offsetY: 0
                }
            },
            methods: {
                move(event) {
                    // event 内部有很多与坐标相关的属性
                    //利用它们来控制球的位置
                    //右侧不能出界
                    if (event.clientX + 30 > 440) {
                        this.offsetX = 440 - 60;
                    }
                    //左侧不能出界 
                    else if (event.clientX - 30 < 0) {
                        this.offsetX = 0;
                    }
                    else {
                        this.offsetX = event.clientX - 30
                    }
                    //下侧
                    if (event.clientY + 30 > 440) {
                        this.offsetY = 440 - 60;
                    }
                    else if (event.clientY - 30 < 0) {
                        this.offsetY = 0;
                    }
                    else {
                        this.offsetY = event.clientY - 30;
                    }

                }
            }
        }
        let instance = Vue.createApp(app).mount("#myapp");
    </script>
</body>